<!-- 我的订单 线下课程组件 -->
<template>
  <view class="item-card" @click="navigate(`/package_user/pages/order/detail?order_id=${data.id}&type=offline`)">
    <view class="flex items-center justify-between">
      <view class="flex items-center">
        <image class="w-40 h-30" src="/static/images/user/ic_order_course.png"></image>
        <view class="ml-2 c-#333 text-28 font-bold">线下课程</view>
      </view>
      <view :class="['text-24', data.order_status <= 1 ? 'c-#F3AD1F' : 'c-#666']">{{ statusText }}</view>
    </view>
    <u-line color="#EEEEEE" :hair-line="false" margin="20rpx 0" />
    <view class="flex w-full">
      <view class="flex-shrink-0 relative w-240 h-240 mr-3">
        <view class="tag-num">{{ data.curriculum?.id ? data.curriculum?.periods_number : data?.periods_number }}</view>
        <u-image width="100%" height="100%" border-radius="12" :src="data.curriculum?.id ? data.curriculum?.cover_image : data?.cover_image" />
      </view>
      <view class="flex-1 flex flex-col text-lines-2">
        <view class="flex-shrink-0 c-#333 text-28 font-bold text-lines-2 mb-7">{{ data.curriculum?.id ? data.curriculum?.title : data?.title }}</view>
        <view>
          <view class="flex overflow-x-scroll">
            <text v-for="(item, index) in (data.curriculum?.id ? data.curriculum?.labels : data?.labels)" :key="index" class="tag-classfy mr-1">{{ item }}</text>
          </view>
          <view class="flex items-center mt-3">
            <view class="flex-shrink-0 flex items-center pr-1">
              <image class="flex-shrink-0 w-20 h-20" src="/static/images/user/ic_clock.png"></image>
              <view class="flex-1 pl-1 c-#B5B5B5 text-24 text-maxline-1">{{ dateFormat(data.curriculum?.id ? data.curriculum?.class_time : data?.class_time, 'YYYY-MM-DD') }}</view>
            </view>
            <view class="flex-1 flex items-center pl-1">
              <image class="flex-shrink-0 w-16 h-22" src="/static/images/user/ic_address.png"></image>
              <view class="flex-1 pl-1 c-#B5B5B5 text-24 text-maxline-1">{{ data.curriculum?.id ? data.curriculum?.province_name : data?.province_name }}·{{ data.curriculum?.id ? data.curriculum?.city_name : data?.city_name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-line color="#EEEEEE" :hair-line="false" margin="20rpx 0" />
    <view :class="['flex', data.order_status <= 1 ? 'items-start' : 'items-end']">
      <view :class="['flex-1 c-#B5B5B5 text-24', data.order_status == 1 ? 'mt-2' : '']">订单号：{{ data.order_sn }}</view>
      <view class="flex-shrink-0 flex flex-col items-end">
        <view v-if="data.order_status > 0" :class="['c-#333 text-24', data.order_status == 1 ? 'mb-4' : '']">实付款：<text
            class="c-#FF513A text-36">￥{{ data.pay_money }}</text></view>
        <view v-if="data.order_status == 0" class="btn btn-cancel" @click.stop="emit('cancel', data.id)">取消预约</view>
        <view v-if="data.order_status == 1" class="btn btn-detail" @click.stop="onCourseDetail(data)">课程详情</view>
      </view>
    </view>
  </view>
</template>  

<script setup>
import { navigate, showToast } from '@/common/util/uni'
import { dateFormat } from '@/common/util/date'
import { orderOfflineStatus } from '@/common/constant/order'

const emit = defineEmits(['cancel']);
const props = defineProps({
  data: Object
})


const statusText = computed(() => {
  return orderOfflineStatus.find(v => v.value == props.data?.order_status)?.label
})

function onCourseDetail (data) {
  if (!data.curriculum?.id) {
    showToast('课程已删除', 'none')
    return
  }
  if (!data.curriculum?.status) {
    showToast('课程已下架', 'none')
    return
  }
  navigate(`/package_square/pages/course/preview/detail?id=${data.class_id}`)
}

</script>

<style lang='scss' scoped>
.tag-classfy {
  min-width: 120rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  background-color: #E5E5E5;
  color: #8C8C8C;
  font-weight: 400;
  font-size: 24rpx;
}

.tag-num {
  min-width: 100rpx;
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
  border-radius: 12rpx 0rpx 12rpx 0rpx;
  background-color: rgba(244, 175, 34, .75);
  padding: 4rpx 20rpx;
  color: #FFFFFF;
  font-weight: 400;
  font-size: 20rpx;
}

.item-card {
  display: flex;
  flex-direction: column;
  padding: 32rpx;
  margin-bottom: 24rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}

.btn {
  width: 188rpx;
  height: 72rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  border-radius: 12rpx;
}

.btn-cancel {
  color: #F4AF22;
  border: 1px solid #F4AF22;
}

.btn-detail {
  background-color: #F4AF22;
  color: #FFFFFF;
}
</style>
